<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="需求状态">
                    <el-select class="w-80" v-model="queryParams.status" placeholder="请选择" clearable filterable>
                        <el-option label="全部" value="0" />
                        <el-option label="上架" value="1" />
                        <el-option label="下架" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发布时间">
                    <!-- <daterange-picker
                        v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time"
                    /> -->
                    <el-date-picker
                        v-model="queryParams.created"
                        type="date"
                        placeholder=""
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item label="内容">
                    <el-input class="w-[280px]" v-model="queryParams.keys" clearable />
                </el-form-item>
                <el-form-item label="发布人">
                    <el-input class="w-[280px]" v-model="queryParams.username" clearable />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" />
                <el-table-column label="内容" prop="content" min-width="360">
                    <template #default="{ row }">
                        <div class="content">{{ row.content }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="图片" min-width="160">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image v-if="row.pics.length != 0" style="width: 58px; height: 58px"
                                    :src="row.pics[0]"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="row.pics.slice(0,1)"></el-image>
                            <el-image v-if="row.pics.length > 1" style="width: 58px; height: 58px"
                                    :src="row.pics[1]"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="row.pics.slice(1,2)"></el-image>
                            <div v-if="row.pics.length > 2" style="line-height: 58px;padding-left: 10px;">...</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="位置" min-width="160">
                    <template #default="{ row }">
                        <el-link :underline="false" type="primary">{{ row.address }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="内容状态" prop="real_name" min-width="100" >
                    <template #default="{ row }">
                       <span v-if="row.status != 1">下架</span>
                       <span v-if="row.status == 1">上架</span>
                    </template>
                </el-table-column>
                <el-table-column label="标签" prop="tag_name" min-width="100" />
                <el-table-column label="发布人" min-width="160">
                    <template #default="{ row }">
                        <router-link
                            v-perms="['dynamic.dynamic/infos']"
                            :to="{ path: getRoutePath('dynamic.dynamic/infos'), query: { id: row.id } }"
                        >
                            <el-link :underline="false" type="primary">{{row.userinfo.realname}}</el-link>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="create_time" min-width="180" />
                <el-table-column label="ip地址" prop="prov" min-width="120" />
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-link v-if="row.status == 2 || row.status == 3" :underline="false" v-perms="['dynamic.dynamic/delDynamic']" type="primary" link @click="handleStatus(row.id, row.status)">上架</el-link>
                        <el-link v-if="row.status == 1" :underline="false" v-perms="['dynamic.dynamic/delDynamic']" type="primary" link @click="handleStatus(row.id, row.status)">下架</el-link>
                        <el-link class="ml-4" :underline="false" type="primary" link @click="handleTag(row)">标签</el-link>
                        <el-link class="ml-4" :underline="false" v-perms="['dynamic.dynamic/toTop']" type="primary" link @click="handleTop(row.id)">{{ row.is_top == 0 ? '置顶': '取消置顶' }}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <popup ref="popupRef" title="设置标签" width="500px" @confirm="handleConfirm" :async="true">
            <div class="pr-4">
                <el-form ref="tagRef" :model="formData" label-width="80px" :rules="formRules">
                    <el-form-item label="标签" prop="tag_name">
                        <el-input v-model="formData.tag_name" type="input" placeholder="标签最多两个字" maxlength="2" />
                    </el-form-item>
                    <el-form-item label="标签图" prop="tag_icon">
                        <el-radio-group v-model="formData.tag_icon">
                            <el-radio label="https://files.onestep6.com/2024/static/image/tag-bg.png">
                                <el-image style="width: 73px; height: 31px"
                                    src="https://files.onestep6.com/2024/static/image/tag-bg.png"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    ></el-image>
                            </el-radio>
                            <el-radio label="https://files.onestep6.com/2024/static/image/tag-bg1.png">
                                <el-image style="width: 73px; height: 31px"
                                    src="https://files.onestep6.com/2024/static/image/tag-bg1.png"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    ></el-image>
                            </el-radio>
                            <el-radio label="https://files.onestep6.com/2024/static/image/tag-bg2.png">
                                <el-image style="width: 73px; height: 31px"
                                    src="https://files.onestep6.com/2024/static/image/tag-bg2.png"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    ></el-image>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                </el-form>
            </div>
        </popup>
    </div>
</template>
<script setup lang="ts">
    import Popup from '@/components/popup/index.vue'
    import { dynamicList, delDynamic, toTop, setTag } from '@/api/safe'
    import { usePaging } from '@/hooks/usePaging'
    import { getRoutePath } from '@/router'
    import feedback from '@/utils/feedback'
    import type { FormInstance, FormRules } from 'element-plus'
	const tagRef = shallowRef<FormInstance>()
    const queryParams = reactive({
        status: '',
        // start_time: '',
        // end_time: '',
        created: '',
        keys: '',
        username: '',
    })
    const { pager, getLists, resetPage, resetParams } = usePaging({
        fetchFun: dynamicList,
        params: queryParams
    })    

    const handleStatus = async (id: number, status:number) => {
        console.log(status)
        if (status == 1) {
            try{
                await feedback.confirm('下架之后，移动端用户及发布人不能看到该内容，是否确认下架？')
                await delDynamic({
                    id,
                    status: 3
                })
                getLists()
            }catch(error){
                console.log(error)
            }
        } else {
            try{
                await feedback.confirm('上架之后，移动端用户及发布人可看到该内容，是否确认上架？')
                await delDynamic({
                    id,
                    status: 1
                })
                getLists()
            }catch(error){
                console.log(error)
            }
        }
    }
    const handleTop = async (id: number) => {
        await toTop({id})
        getLists()
    }
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
    const handleTag = async (row:any) => {
        tagRef.value?.resetFields()
        formData.id = row.id;
        formData.tag_name = row.tag_name;
        formData.tag_icon = row.tag_icon;
        popupRef.value?.open()
        console.log(formData)
    }
    const formData:any = reactive({
        id: '',
        tag_name: '',
        tag_icon: ''
    })
    const formRules = {
        tag_name: [{required: true, message: '请输入标签', trigger: 'change'}],
        tag_icon: [{required: true, message: '请选择标签类型', trigger: 'change'}],
    }
    const handleConfirm = async () => {
        await tagRef.value?.validate()
        console.log(formData)
        await setTag(formData)
        popupRef.value?.close()
        getLists()
    }
    // const popupClose = () => {
	// 	popupRef.value?.close()
	// 	tagRef.value?.resetFields()
	// }
    
    getLists()
    // pager.lists = [{
    //     'address': '地址'
    // }]
    </script>
<style lang="scss" scoped>
.content{
    width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>